<%--
  Created by IntelliJ IDEA.
  User: Juan
  Date: 9/11/12
  Time: 23:29
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name='layout' content='main'/>
    <title>Perfil Publico Usuario</title>
    <r:script>
        jQuery(function () {
            jQuery("#slider").slider({
                range: "max",
                min: 1,
                max: 5,
                value: 1,
                slide: function (event, ui) {
                    jQuery("#puntaje").val(ui.value);
                }
            });
            jQuery("#puntaje").val(jQuery("#slider").slider("value"));
        });
    </r:script>
    <style type="text/css">
    #slider {
        margin-top: 10px;
        width: 100px;
    }

    #slider .ui-slider-range {
        background: #729fcf;
    }

    #slider .ui-slider-handle {
        border-color: #729fcf;
    }
    </style>
    <r:script>
        var $ = jQuery;
        $(document).ready(function(){
            $('.bxslider').bxSlider({
                minSlides: 2,
                maxSlides: 2,
                slideWidth: 60,
                slideMargin: 10,
                infiniteLoop: false,
                hideControlOnEnd: true,
                moveSlides: 1
            });
        });
    </r:script>
</head>

<body>
<br>

<div align="center">
    <table cellspacing="0" width="800px" align="center">
        <tr>
            <td align="left" width="200px">
                <div class="single">
                    <a href="${createLink(controller: 'image', action: 'fotoPrincipalPersona', id: persona?.id)}" rel="lightbox">
                        <img src="${createLink(controller: 'image', action: 'fotoPrincipalPersona', id: persona?.id)}"
                             width="150px" align="center"
                             height="150px" alt="Pepito"/>
                    </a>
                </div>
                <br>
                <div align="left"
                     style="overflow: scroll;overflow-x: hidden;overflow-y: hidden;white-space: nowrap; width: 180px; height: 120px">
                    <ul class="bxslider">
                        <g:each in="${persona?.getFotosNoPrincipal()}" var="foto">
                            <li>
                                <div class="single">
                                    <a href="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}" rel="lightbox[galeria]">
                                        <img src="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}"
                                             width="60px" height="60px" name='${foto.id}' />
                                    </a>
                                </div>
                            </li>
                        </g:each>
                    </ul>
                    %{--<g:each in="${persona?.getFotosNoPrincipal()}" var="foto">--}%
                    %{--<div class="single">--}%
                    %{--<a href="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}" rel="lightbox[galeria]">--}%
                    %{--<img src="${createLink(controller: 'image', action: 'foto', params: [fotoId: foto.id, personaId: persona?.id])}"--}%
                    %{--width="60px" height="60px" name='${foto.id}'--}%
                    %{--onmouseover=" ${foto.id}.width = '300';--}%
                    %{--${foto.id}.height = '200';"--}%
                    %{--onmouseout=" ${foto.id}.width = '60';--}%
                    %{--${foto.id}.height = '60';"/>--}%
                    %{--</a>--}%
                    %{--</div>--}%
                    %{--</g:each>--}%
                </div>
            </td>
            <td align="left" style="padding-left: 50px" width="200px">
                <b>${persona.nombre} ${persona.apellido}</b>
                <br/>
                <g:each in="${1..5}" var="contador">
                    <g:set var="onOff" value="off"/>
                    <g:if test='${contador <= persona?.getReputacion()}'>
                        <g:set var="onOff" value="on"/>
                    </g:if>
                    <img src="${createLinkTo(dir: 'images/icons/', file: 'rating_icon_' + onOff + '.png')}"
                         alt="Rating"/>
                </g:each>
            </td>
            <td align="center" style="padding-left: 200px">
                <sec:ifLoggedIn>
                    <div align="center">
                        <g:link controller="perfilPublico" action="enviarMensaje" style="color: #ffffff;"
                                params="[personaId: persona?.id]">
                            <input type="submit" class="button" style="font-size: 12px;width: 160px;text-align: center"
                                   value="Enviar Mensaje">
                        </g:link>
                        <br>
                        <br>
                        <g:link controller="perfilPublico" action="denunciar" style="color: #ffffff;"
                                params="[personaId: persona?.id]">
                            <input type="submit" class="button" style="font-size: 12px;width: 160px;text-align: center"
                                   value="Denunciar">
                        </g:link>
                        <br>
                        <br>
                        <g:link params="[personaId: persona?.id]" controller="perfilPublico" action="enviarSolicitud"
                                style="color: #ffffff;font-size: 12">
                            <input type="submit" class="button" style="font-size: 12px;width: 160px;text-align: center"
                                   value="Enviar Solicitud">

                        </g:link>
                        <br>
                        <br>
                        <g:form action="puntuar">
                            <input type="hidden" name="personaId" value="${persona?.id}"/>

                            <div align="center"
                                 style="white-space: nowrap;overflow: hidden;padding-left: 5px;padding-bottom: 20px;">
                                <div style="margin-top: 5px; width: 20px;white-space: nowrap;;position: absolute;"
                                     align="left">
                                    <input type="text" name="puntaje" id="puntaje"
                                           style="border: 0; color: #729fcf; font-weight: bold; width: 10px" value=""/>
                                </div>

                                <div style="padding-left: 48px;">
                                    <div id="slider" style="white-space: nowrap;;position: absolute;"
                                         align="right"></div>
                                </div>
                            </div>

                            <br>

                            <div align="center">
                                <input type="submit" class="button"
                                       style="font-size: 12px;width: 160px;text-align: center" value="Puntuar">
                            </div>
                        </g:form>
                        <br>
                        <!--<g:link params="[personaId: persona?.id]" controller="perfilPublico" action="index"
                                    style="color: #ffffff;font-size: 12">
                            <input type="submit" class="button" style="font-size: 12px" value="Agregar Entrenamiento">
                        </g:link>-->
                    </div>
                </sec:ifLoggedIn>
            </td>
        </tr>

    </table>
</div>
<br>

<div align="center">
    <hr noshade width="90%" align="center">
</div>

<br>

<div align="center">
    <table cellspacing="0" border="1" width="800px">
        <tr>
            <th bgcolor="gray" style="color: #ffffff;text-align: left">
                Biografia
            </th>
        </tr>
        <tr>
            <td align="center">
                <span style="text-align: justify">
                    ${persona.biografia}
                </span>
            </td>
        </tr>
    </table>
</div>
<br>

</body>
</html>